<template>
  <li class="item">
    <div>
      <router-link
        :to="{
          path: `/playlist/${item.id}`,
          query: {
            item: item,
          },
        }"
        ><img :src="item.picUrl"
      /></router-link>
      <span>{{ item.playCount | formatNum }}万</span>
    </div>
    <router-link
      :to="{
        path: `/playlist/${item.id}`,
        query: {
          item: item,
        },
      }"
      >{{ item.name }}</router-link
    >
  </li>
</template>
<script>
export default {
  name: "ListItem",
  props: ["item"],
  created() {},
  filters: {
    formatNum(val) {
      return (val / 10000).toFixed(1);
    },
  },
};
</script>
<style lang="less" scoped>
li.item {
  display: flex;
  flex-direction: column;
  div {
    position: relative;
    span {
      position: absolute;
      right: 5px;
      top: 3px;
      background-image: url();
      background-repeat: no-repeat;
      background-position: 0px 3px;
      background-size: 12px;
      font-size: 12px;
      color: white;
      text-shadow: 0px 0px 2px #000;
      padding-left: 12px;
      text-align: center;
    }
  }
  & > a {
    display: inline-block;
    width: 100%;
    font-size: 13px;
    color: white;
    text-decoration: none;
    padding: 0px 0px 10px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 可以显示的行数，超出部分用...表示*/
    -webkit-box-orient: vertical;
  }
}
</style>
